import React from 'react';
import {View, Image} from 'react-native';
import ImageCacheManager from 'react-native-cached-fast-image/ImageCacheManager'
import { Lt, Color, NavTheme as Nav, Label, Button, Images, Fimage, Touch, Jpp, Dialog, Navigator, Jx, Rlist, Login } from "../_utils";
import { Net } from "../_net"
import { cTemp } from '../_util';
import { cApply } from './_apply';
import { cMe } from '../me/_me';


class ListMe extends React.PureComponent{
    render(){
        const {source, title, content, ...other} = this.props;
        return <Touch {...other} style={{paddingVertical:Lt.pad, marginVertical:5}}>
            <View  style={{width:"100%", flexDirection:"row", justifyContent:"space-between", alignItems:"center"}}>
                <View style={{flexDirection:"row", alignItems:"center"}}>
                    <Image source={source} style={{marginHorizontal:Lt.margin}}/>
                    <Label style={{fontSize:Lt.c16, color:Color.c3}}>{title}</Label>
                </View>
                {
                    (!content) ? <Image source={Images.you}/> :
                    <Label>{content}</Label>
                }
                
            </View>
        </Touch>
    }
}

const c_imageCacheManager = new ImageCacheManager();
const c_cacheZero = "0M";
export class ApplyMe extends React.Component{
    constructor(props){
        super(props);

        const data = 
        this.state = {
            data : {
                image : "",
                myMoney : Jpp.questionMark,
            },
            cacheSize : c_cacheZero,
        }
        
        this.onFresh = this.onFresh.bind(this);
        this.onHead = this.onHead.bind(this);
        this.onAgent = this.onAgent.bind(this);
        // this.onCash = this.onCash.bind(this);
        // this.onOrder = this.onOrder.bind(this);
        // this.onTeam = this.onTeam.bind(this);
        // this.onReport = this.onReport.bind(this);
        this.onTutorial = this.onTutorial.bind(this);
        // this.onSpread = this.onSpread.bind(this);
        this.onQuestion = this.onQuestion.bind(this);
        this.onFavorite = this.onFavorite.bind(this);
        this.onContact = this.onContact.bind(this);

        this.onClear = this.onClear.bind(this);
    }
    static navigationOptions = {
        tabBarIcon : ({focused, tintColor})=><Image source={focused ? Images.WO_2 : Images.WO}/>
    }

    componentWillMount(){
        c_imageCacheManager.getCacheInfo().then(r=>{ 
            let cacheSize = r.size;
            if(cacheSize > 1024 * 1024){
                cacheSize = parseFloat(cacheSize / 1024 / 1024).toFixed(2) + "M";
            }else if(cacheSize > 1024){
                cacheSize = parseFloat(cacheSize / 1024).toFixed(2) + "K";
            }else{
                cacheSize += "B";
            }
            this.setState({cacheSize});
        })
    }

    onFresh(didMount, freshed){
        Net.request("member/me", null, {freshed}).then(r=>{
            if(r.data){
                cTemp.setRoleId(r.data.roleId);
                this.setState({data:cMe.toMe(r.data)})
            }
        });
        this.componentWillMount();
    }
    onHead(){
        // const { data } = this.state;
        // Navigator.push("ApplyInfo", {data});
    }
    onAgent(){
        if(cApply.isVisotor()){
            Navigator.push("ApplyLogin", {account : ""})
            return;
        }
        Dialog.msg2("确定退出登录？", ()=>{
            cTemp.setFromInfo(true);
            Navigator.reset("ApplyAutoLogin");
        });
    }
    // onCash(){
    //     Navigator.push("Cash");
    // }
    // onOrder(){
    //     const { data } = this.state;
    //     if(data.roleId === eRole.FANS){
    //         Dialog.toast(eRole.names[eRole.FANS] + "无订单")
    //         return;
    //     }
    //     Navigator.push("Order");
    // }
    // onTeam(){
    //     if(!this.isFansMsg()){
    //         const { data } = this.state;
    //         Navigator.push("Team", {data});
    //     }
    // }
    // onReport(){
    //     const { data } = this.state;
    //     Navigator.push("Profit", {data});
    // }
    onTutorial(){
        Navigator.push("Tutorial");
    }
    // onSpread(){
    //     if(!this.isFansMsg()){
    //         Navigator.push("Spread");
    //     }
    // }
    onQuestion(){
        Navigator.push("Questions");
    }
    onFavorite(){
        if(cApply.isVisotor()){
            Dialog.toast("请先登录");
            return;
        }
        Navigator.push("ApplyFavorite");
    }
    onContact(){
        Navigator.push("Contact");
    }
    isFansMsg(){
        const { data } = this.state;
        return cMe.fansMsg(data.roleId, "推广赚钱/团队管理", this.props.navigation);
    }

    onClear(){
        Dialog.msg2("清除缓存", ()=>{
            c_imageCacheManager.clearCache();
            Login.clearCache();
            Dialog.toast("清除完毕");
            this.setState({cacheSize : c_cacheZero});
        });
    }

    render(){
        const { data, cacheSize } = this.state;
        return <View style = {{flex:1, backgroundColor:Color.back}}>
            <Nav.StateBar/>
            <View style={{backgroundColor:Color.theme, paddingVertical:20, alignItems:"center"}}>
                <Touch onPress={this.onHead} style={{borderRadius:40}}>
                    <Fimage uri={cApply.isVisotor() ? "" :  data.image} style={{width:80, height:80, borderRadius:40}}/>
                </Touch>
                <Label style={{marginTop:Lt.margin, fontSize:Lt.c16, color:"white"}}>{cApply.isVisotor() ? "游客" : data.name }</Label>
                <Button.Border title={ cApply.isVisotor() ? "登录" : "退出登录" } onPress={this.onAgent} style={{marginVertical:10, height:32, borderColor:"white", color:"white"}}/>
            </View>
            <Rlist onFresh = {this.onFresh}>
                {/* <View style={{backgroundColor:Color.theme, paddingVertical:20, alignItems:"center"}}>
                    <Touch onPress={this.onHead} style={{borderRadius:40}}>
                        <Fimage uri={data.image} style={{width:80, height:80, borderRadius:40}}/>
                    </Touch>
                    <Label style={{marginTop:Lt.margin, fontSize:Lt.c16, color:"white"}}>{cApply.isVisotor() ? "游客" : data.name }</Label>
                    <Button.Border2 title={eRole.names[data.roleId]} onPress={this.onAgent} style={{marginTop:5, height:24, borderColor:"white", color:"white"}}/>
                </View><View style={{flex:1}}>
                <View style={{position:"absolute", width:"100%", height:80, backgroundColor:Color.theme}}/>
                <View style={{backgroundColor:"white", borderRadius:Lt.radiu2, marginHorizontal:Lt.margin}}>
                    <View style={{backgroundColor:Color.back, height:50, borderRadius:25, margin:Lt.margin, paddingHorizontal:Lt.pad, flexDirection:"row", justifyContent:"space-between", alignItems:"center"}}>
                        <Label style={{fontSize:Lt.c16, color:Color.c3}}>
                            预估收入: <Label style={{fontSize:Lt.c16, color:Color.theme}}>{data.myMoney}</Label>
                        </Label>
                        <Button.Pure onPress={this.onCash} title={"提现"} style={{fontSize:Lt.c16}}/>
                    </View>
                    <View style = {{flexDirection:"row", justifyContent:"space-around", paddingVertical:20}}>
                        <TouchMe onPress={this.onOrder} source={Images.dingdan} title={"我的订单"}/>
                        <TouchMe onPress={this.onTeam} source={Images.tuandui} title={"我的团队"}/>
                        <TouchMe onPress={this.onReport} source={Images.baobiao} title={"收益报表"}/>
                    </View>
                </View> */}
                <View style={{backgroundColor:"white", borderRadius:Lt.radiu2, margin:Lt.margin, paddingHorizontal:20, paddingVertical:Lt.pad, flexShrink:1}}>
                    <ListMe onPress={this.onFavorite} source={Images.shoucang} title={"我的收藏"}/>
                    <ListMe onPress={this.onTutorial} source={Images.jiaocheng} title={Jpp.gameName + "教程"}/>
                    <ListMe onPress={this.onQuestion} source={Images.wenti} title={"常见问题"}/>
                    <ListMe onPress={this.onContact} source={Images.lianxi} title={"联系我们"}/>
                    <ListMe onPress={this.onClear} source={Images.tuiguang} title={"清除缓存"} content = { cacheSize }/>
                </View>
                {/* <View style={{height:30}}/>
            </View> */}
        </Rlist>
    </View>;
    }
}